<template>
	<view class="skin-damage-container">
		<scroll-view class="form-scroll" scroll-y>
			<view class="form-list">
				<view class="form-item required">
					<text class="form-label">总额</text>
					<input class="form-input" v-model="form.totalAmount" type="digit" placeholder="请输入总额" />
				</view>
				<view class="form-item">
					<text class="form-label">单价</text>
					<input class="form-input" v-model="form.unitPrice" type="digit" placeholder="请输入单价" />
				</view>
				<view class="form-item">
					<text class="form-label">报销科目/报销原由</text>
					<input class="form-input" v-model="form.perCapita" type="digit" placeholder="请输入报销科目/报销原由" />
				</view>
				<view class="form-item required">
					<text class="form-label">备注</text>
					<textarea class="form-textarea" v-model="form.remark" placeholder="请输入备注" />
				</view>
			<view class="form-item required photos">
				<text class="form-label">报销照片</text>
				<view class="photo-card">
					<view class="photo-header">
						<!-- <text class="photo-title">凭证照片</text> -->
						<text class="photo-desc">请上传报销明细照片，需保持清晰完整</text>
					</view>
					<view class="photo-grid">
						<view class="photo-item" v-for="(photo, index) in form.photos" :key="photo">
							<image class="photo-image" :src="photo" mode="aspectFill" @click="previewPhoto(index)" />
							<view class="photo-delete" @click.stop="removePhoto(index)">
								<text class="delete-icon">×</text>
							</view>
						</view>
						<view class="photo-item upload" v-if="form.photos.length < maxPhotos" @click="choosePhotos">
							<view class="upload-icon">
								<text class="camera-icon">📷</text>
							</view>
							<text class="upload-text">添加照片</text>
							<text class="upload-sub">需{{ minPhotos }}-{{ maxPhotos }}张</text>
						</view>
					</view>
					<text class="photo-tip">已选 {{ form.photos.length }} 张，至少 {{ minPhotos }} 张</text>
				</view>
			</view>
			</view>
		</scroll-view>
		<view class="bottom-btns">
			<button class="bottom-btn primary" @click="confirm">确认信息</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					totalAmount: '',
					unitPrice: '',
					perCapita: '',
					remark: '',
				photos: []
			},
			minPhotos: 1,
			maxPhotos: 5
			}
		},
		methods: {
			choosePhotos() {
				const remaining = this.maxPhotos - this.form.photos.length;
				if (remaining <= 0) {
					uni.showToast({
						title: `最多上传${this.maxPhotos}张照片`,
						icon: 'none'
					});
					return;
				}
				uni.chooseImage({
					count: remaining,
					sizeType: ['compressed'],
					success: (res) => {
						const merged = [...this.form.photos, ...res.tempFilePaths];
						this.form.photos = merged.slice(0, this.maxPhotos);
					}
				});
			},
			previewPhoto(index) {
				if (!this.form.photos.length) return;
				uni.previewImage({
					current: this.form.photos[index],
					urls: this.form.photos
				});
			},
			removePhoto(index) {
				uni.showModal({
					title: '提示',
					content: '确认删除该照片吗？',
					success: (res) => {
						if (res.confirm) this.form.photos.splice(index, 1);
					}
				});
			},
			validate() {
				if (!this.form.totalAmount) {
					uni.showToast({
						title: '请填写总额',
						icon: 'none'
					});
					return false;
				}
				if (!this.form.remark.trim()) {
					uni.showToast({
						title: '请填写备注',
						icon: 'none'
					});
					return false;
				}
				if (this.form.photos.length < this.minPhotos) {
					uni.showToast({
						title: `请至少上传${this.minPhotos}张照片`,
						icon: 'none'
					});
					return false;
				}
				return true;
			},
			confirm() {
				if (!this.validate()) return
				uni.showToast({
					title: '信息确认成功',
					icon: 'success'
				})
				// 可以在这里添加保存逻辑或跳转逻辑
				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			}
		}
	}
</script>

<style scoped lang="scss">
	.skin-damage-container {
		background: $bg-secondary;
		min-height: 100vh;
		// padding-bottom: 140rpx;
	}

	.form-scroll {
		padding: 0 32rpx;
		// padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
		
		/* 预留底部按钮空间，避免遮挡输入框 */
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
		overflow-y: auto;
		z-index: 2;
		width: 92vw;
	}

	.form-list {
		margin: 12rpx auto 28rpx;
		padding: 30rpx;
		max-width: 660rpx;
		background: $bg-primary;
		border-radius: $radius-lg;
		border: 1rpx solid $border-light;
		box-shadow: $shadow-md;
	}

	.form-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 28rpx;
	}

	.form-item.photos {
		flex-direction: column;
	}

	.form-label {
		font-size: $font-md;
		font-weight: 600;
		color: $text-primary;
		margin-bottom: 12rpx;
		line-height: 1.4;
	}

	.form-item.required .form-label::before {
		content: '*';
		color: $error;
		margin-right: 6rpx;
	}

	.form-input {
		width: 100%;
		height: 80rpx;
		border: 2rpx solid $border-light;
		border-radius: $radius-md;
		padding: 0 20rpx;
		font-size: $font-md;
		background: $bg-primary;
		color: $text-primary;
		box-sizing: border-box;
	}

	.form-textarea {
		width: 100%;
		min-height: 120rpx;
		border: 2rpx solid $border-light;
		border-radius: $radius-md;
		padding: 12rpx 20rpx;
		font-size: $font-md;
		background: $bg-primary;
		color: $text-primary;
		box-sizing: border-box;
	}

	.photo-card {
		background: $bg-primary;
		border-radius: $radius-lg;
		border: 1rpx solid $border-light;
		box-shadow: $shadow-md;
		padding: 28rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.photo-header {
		display: flex;
		flex-direction: column;
		gap: 6rpx;
	}

	.photo-title {
		font-size: $font-lg;
		font-weight: 600;
		color: $text-primary;
	}

	.photo-desc {
		font-size: $font-sm;
		color: $text-secondary;
	}

	.photo-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
	}

	.photo-item {
		position: relative;
		border-radius: $radius-md;
		border: 2rpx solid $border-light;
		background: $bg-primary;
		box-shadow: $shadow-sm;
		overflow: hidden;
		aspect-ratio: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
	}

	.photo-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.photo-delete {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.55);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.delete-icon {
		font-size: 28rpx;
		color: $text-white;
		line-height: 1;
	}

	.photo-item.upload {
		border-style: dashed;
		border-color: rgba(30, 136, 229, 0.35);
		background: rgba(30, 136, 229, 0.05);
		flex-direction: column;
		gap: 10rpx;
	}

	.photo-item.upload:active {
		background: rgba(30, 136, 229, 0.12);
		border-color: $primary;
	}

	.upload-icon {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background: rgba(30, 136, 229, 0.12);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.camera-icon {
		font-size: 36rpx;
	}

	.upload-text {
		font-size: $font-sm;
		color: $primary;
		font-weight: 600;
	}

	.upload-sub {
		font-size: 22rpx;
		color: $text-tertiary;
	}

	.photo-tip {
		font-size: 24rpx;
		color: $text-tertiary;
	}

	@media screen and (max-width: 600rpx) {
		.photo-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.bottom-btns {
		display: flex;
		justify-content: center;
		position: fixed;
		left: 30rpx;
		right: 30rpx;
		bottom: 30rpx;
		z-index: 10;
	}

	.bottom-btn {
		display: flex;
		
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 660rpx;
		height: 88rpx;
		border: none;
		border-radius: $radius-xl;
		font-size: $font-lg;
		font-weight: 600;
		box-shadow: $shadow-md;
		transition: all 0.3s ease;
	}

	.bottom-btn.primary {
		background: linear-gradient(135deg, $primary 0%, $primary-light 100%);
		color: $text-white;
		box-shadow: 0 8rpx 24rpx rgba(51, 136, 255, 0.3);
	}

	.bottom-btn.primary:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 12rpx rgba(51, 136, 255, 0.35);
	}

	.bottom-btn.ghost {
		background: rgba(255, 255, 255, 0.9);
		color: $text-secondary;
		border: 2rpx solid $border-light;
	}

	.bottom-btn.ghost:active {
		background: $text-white;
		transform: translateY(2rpx);
	}
</style>